<template>
  <a-input-search
    v-model="modelValue"
    :enter-button="text"
    :placeholder="placeholder"
    style="width: 100%"
    :maxLength="maxLength"
    @search="onInputSearch"
    @change="onSearchChange"
    @pressEnter="onPressEnter"
    @focus="onFocus"
  />
</template>

<script>
export default {
  name: "epSearch",
  props: {
    value: [Number, String, Boolean, Array],
    placeholder: {
      type: String,
      default: "请输入关键字",
    },
    placeholder: {
      type: String,
      default: "请输入关键字",
    },
    text: {
      type: String,
      default: "搜索",
    },
    maxLength: {
      type: [Number, String],
      default: 9999,
    },
  },
  data() {
    return {
      modelValue: "",
    };
  },
  mounted() {
    this.modelValue = this.value;
  },
  methods: {
    onInputSearch(value) {
      this.$emit("search", value);
    },
    onSearchChange(e) {
      let value = this.modelValue;
      this.$emit("change", value);
      this.$emit("input", value);
    },
    onPressEnter() {
      let value = this.modelValue;
      this.$emit("search", value);
    },
    //获得焦点时回调
    onFocus() {
      this.$emit("focus");
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
::v-deep .ant-input-wrapper {
  .ant-input {
    height: 32px;
    background: #002a44;
    border: 1px solid #3e9fc8;
    color: #fff;
    &:focus {
      box-shadow: none;
    }
  }
  .ant-btn {
    height: 32px;
    background: #3e9fc8;
    border: 1px solid #3e9fc8;
    font-size: 16px;
  }
}
</style>
